<template>
	<div class="row-item-wrap" :class="(!isOpen && props.isShowOpen) && 'sc'">
		<div class="row-item" @click="handleClick(index)" :class="active == index && 'active'" v-for="(item,index) in props.data" :key="item.value">{{ item.label }}</div>
		<el-button v-if="props.isShowOpen" class="btn" type="primary" @click="handleOpen">{{ isOpen? t('buttons.fold') : t('buttons.Unfold') }}</el-button>
	</div>
</template>
<script setup lang="ts" name="rowSelect">
import { watch } from 'vue'
import { useI18n } from 'vue-i18n';
const { t,locale  } = useI18n();
const emit = defineEmits(['change'])
const props = defineProps(['data','index','isShowOpen']);

// 定义变量
const active = ref(0)
const isOpen = ref(false)

if(props.index !== undefined){
    active.value = props.index
}

// 监听index变动
watch(()=>props.index,(index)=>{
	active.value = Number(index)
})

function handleClick(index:any){
    active.value = index
    emit('change',active.value)
}

// 展开
function handleOpen(){
	isOpen.value = !isOpen.value
}
</script>
<style lang="scss" scoped>
.row-item-wrap {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	position: relative;
	padding-right: 60px;
	&.sc{
		height: 35px;
		padding-right: 60px;
		overflow: hidden;
	}
	.btn{
		position: absolute;
		z-index: 1;
		right: 0;
		top: 0;
	}
	.row-item {
		font-size: 16px;
		height: 25px;
		display: flex;
		align-items: center;
		padding: 0 10px;
		margin:5px 0 ;
        cursor: pointer;
		&.active {
			background-color: #2A74AF;
			color: #fff;
		}
	}
}
</style>
